<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Take The Test</title>
<link rel="stylesheet" type="text/css" href="resources/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<link rel="stylesheet" type="text/css" href="resources/effects/animations.css">
<link rel="stylesheet" type="text/css"
	href="resources/buttons/css/buttons.css" />
</head>
<body>
	<jsp:include page="parts/navigation.jsp"></jsp:include>
	<script type="text/javascript" src="resources/effects/slideup.js"></script>
<form action="getResult" method="get" >

	<input type="hidden" id="testIdid" name="testIdid" value="${testId}">
	
	<div class="panel panel-default text-center slideUp" id="takeTest">
		<div class="panel-heading">
			<label>${testName}</label>
		</div>
		<div class="panel-body">
			
			<script type="text/javascript" src="resources/js/test.js"></script>
			
			
			<span id="notAnswer" style="color: red" ></span>
			
			<table class="fa fa-table" id="questionList">
				<tbody>
					<c:forEach var="q" items="${testQuestions}" varStatus="index">
						<tr id="${index.count}">
							<td><span>${index.count}) ${q.text} </span>
								<div class="radio">
									<label> <c:forEach var="ans" items="${answers.get(index.count-1)}">


											<input type="radio" name="answerRadio${index.count-1}" id="answerRadio${index.count-1}" value="${ans.text}"> ${ans.text}
											<i class="fa fa-circle-o"></i>
											<br>

										</c:forEach>
									</label>
								</div>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>

			
						 
		
			
		
			
			<!-- <button type="button">Next</button> -->
			<ul class="pager">
				<!-- <li><a href="#">Previous</a></li> -->

				<!-- <li><a href="testq">Next</a></li> -->
				
				<li><button type="button" class = "button button-border-action button-pill" id="nextQuestionButton">Next</button></li>

			</ul>
		</div>
	</div>

	<button type="submit" id="getResultForTest" style="display: none;"></button>
</form>

</body>
</html>